<template>
    <mt-tab-container>
    <mt-tab-container-item>
        <div class="infoitem">
            <div class="infoitemHead">
                <router-link :to="`/article/${id}`">{{subject}}</router-link>
            </div>
            <div @click="getNext" class="infoitemContent">
                <img v-lazy="image" alt="" v-if="image != null">
                <div class="infoitemText" v-text="description"></div>
            </div>
        </div>
    </mt-tab-container-item>
    </mt-tab-container>
</template>
<script>
export default {
    props:['id','subject','description','image'],
    methods:{
        getNext(){
            var id = this.id;
            this.$router.push({path:`/article/${id}`})
        }
    }
}
</script>
<style scoped>
a{
    color: black;
    text-decoration: none;
}
.infoitem{
    margin:15px 15px 0 15px;
    border-bottom:1px solid #000;
}
.infoitemHead{
    font-weight:bold;
    font-size:16px;
    line-height:22px;
    text-align: left;
}
.infoitemContent{
    display:flex;
    align-items: center;
    width: 100%;
    padding: 10px 0;
}
img{
     width:112px;
}
.infoitemText{
    font-size: 14px;
    line-height: 21px;
    color: #333;
    height: 65px;
    margin: 5px 10px;
    overflow: hidden;
    text-overflow: ellipsis;
}
img[lazy=loading]{
    width: 112px;
    
}
</style>